<template>
  <div>
    <el-card>
      <My-CategorySelect
        @getAttrInfoList="getAttrInfoList"
        :isShow="scene != 0"
      ></My-CategorySelect>
    </el-card>
    <el-card style="margin-top: 20px">
      <!-- spu列表 -->
      <div v-show="scene == 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!category3Id"
          @click="addSpu"
          >添加SPU</el-button
        >
        <!-- <el-button type="primary" icon="el-icon-plus">添加SPU</el-button> -->
        <el-table style="width: 100%" border :data="records">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="spuName"
            label="Spu名称"
            width="width"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="Spu描述"
            width="width"
          ></el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row }">
              <My-HintButton
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加"
                @click="addSku(row)"
              ></My-HintButton>
              <My-HintButton
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改"
                @click="updateSpu(row)"
              ></My-HintButton>
              <My-HintButton
                type="info"
                icon="el-icon-warning"
                size="mini"
                title="查看"
                @click="hanlder(row)"
              ></My-HintButton>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="deleteSpu(row)"
              >
                <My-HintButton
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除"
                  slot="reference"
                ></My-HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper, ->,sizes, total"
          :total="total"
          style="text-align: center"
        ></el-pagination>
      </div>
      <!--添加修改spu -->
      <spuFrom v-show="scene == 1" @changeScenc="changeScenc" ref="spu"
        >spuFrom</spuFrom
      >
      <!-- 添加修改sku -->
      <skuFrom v-show="scene == 2" ref="sku" @changeScencs="changeScencs"
        >skuFrom</skuFrom
      >
    </el-card>
    <!-- 弹出框 -->
    <el-dialog
      :title="`${spu.spuName}的sku列表`"
      :visible.sync="dialogTableVisible"
      :before-close="close"
    >
      <el-table style="width: 100%" border :data="spuList" v-loading="loading">
        <el-table-column
          prop="skuName"
          label="名称"
          width="width"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="width"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="width"
          align="center"
        ></el-table-column>
        <el-table-column prop label="默认图片" width="width" align="center">
          <template slot-scope="{ row }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import spuFrom from "@/views/product/Spu/SpuFrom";
import skuFrom from "@/views/product/Spu/SkuFrom";
export default {
  name: "MySpu",
  data() {
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",
      // 第几页
      page: 1,
      // 每一页展示多少条数据
      limit: 3,
      // spu列表响应式数据 数组
      records: [],
      // 总数据条数
      total: 0,
      // 0显示spu列表 1spufrom 2skufrom
      scene: 0,
      // 控制弹出框显示隐藏
      dialogTableVisible: false,
      // 临时存储弹出框展示的spu数据 对象
      spu: {},
      // 数组
      spuList: [], 
      //是否显示loading加载
      loading: true,
    };
  },
  components: {
    spuFrom,
    skuFrom,
  },
  methods: {
    // 父判断身份标识保存分类id 发送请求拉取平台属性列表即可
    getAttrInfoList({ categoryId, leave }) {
      if (leave == "1") {
        // 注意为了保证三级分类的数据保持呼应 当分类前面的分类id发生变化时应清空后面的所有分类id
        this.category2Id = "";
        this.category3Id = "";
        this.category1Id = categoryId;
      } else if (leave == "2") {
        this.category3Id = "";
        this.category2Id = categoryId;
      } else {
        this.category3Id = categoryId;
        // 拿到三级id就请求拉取spu列表
        this.getSpuList();
      }
    },
    // 获取spu列表
    getSpuList() {
      const { page, limit, category3Id } = this;
      this.$API.spu.reqSpuList(page, limit, category3Id).then((res) => {
        if (res.code === 200) {
          // 保存响应回的spu列表 及 总数据条数
          this.records = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 拉取当前页码数据
    handleCurrentChange(pages) {
      this.page = pages;
      this.getSpuList();
    },
    //
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuList();
    },
    // 切换至添加Spu
    addSpu() {
      this.scene = 1;
      // 通知子组件请求数据
      this.$refs.spu.getSpuDate(this.category3Id);
    },
    // 切换至修改spu
    updateSpu(row) {
      this.scene = 1;
      //每点击修改spu按钮 就去触发子组件内初始化数据的函数(且传递当前被触发的spu列表属性值参数)
      this.$refs.spu.initSpuData(row);
    },
    // 父给子的自定义事件的回调
    changeScenc({ scene, flag }) {
      //显示spu列表
      this.scene = scene;
      // 子组件通知父组件 切换场景 需要再次获取spu列表的数据进行展示
      if (flag == "修改") {
        this.getSpuList(this.page);
      } else {
        this.getSpuList((this.page = 1));
      }
    },
    changeScencs(scene) {
      this.scene = scene;
    },
    // 删除spu业务
    async deleteSpu(row) {
      let result = await this.$API.spu.reqdeleteSpu(row.id);
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
      }
    },
    // 点击添加按钮 切换至skuFrom组件
    addSku(row) {
      console.log(row);
      this.scene = 2;
      // 父调用子组件方法 通知子组件发请求 --三个
      this.$refs.sku.getData(this.category1Id, this.category2Id, row);
    },
    // 点击查看按钮
    async hanlder(spu) {
    
      this.dialogTableVisible = true;
      this.spu = spu;
      let result = await this.$API.spu.reqSkuList(spu.id);
      if (result.code === 200) {
        this.spuList = result.data;
        this.loading = false;
      }
    },
    // dialog关闭前的回调 业务
    close(done) {
      this.loading = true;
      // 清空数据 避免数据回显 清空数据时一定要注意恢复成data配置的初始值
      this.spuList = [];
      // 关闭dialog
      done()
    },
  },
};
</script>

<style>
</style> 